{% extends "base.html" %}

{% block title %}登录 - 智能工厂管理系统{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
{% endblock %}

{% block content %}
<main>
    <h2>智能工厂管理系统</h2>
    <form id="loginForm" action="/login" method="post" autocomplete="off">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" 
                   aria-label="用户名" aria-required="true" required
                   autocomplete="off">
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" 
                   aria-label="密码" aria-required="true" required
                   autocomplete="new-password">
        </div>
        <div>
            <label for="captcha">验证码:</label>
            <div class="captcha-container">
                <input type="text" id="codeId" name="codeId" hidden>
                <input type="text" id="captcha" name="captcha" 
                       aria-label="验证码" aria-required="true" required
                       autocomplete="off">
                <img id="captchaImage" src="" alt="验证码" 
                     aria-label="点击刷新验证码">
                <p>看不清？换一张！</p>
            </div>
        </div>
        <span id="error" role="alert"></span>
        <div>
            <button type="submit">登录</button>
        </div>
    </form>
</main>

<!-- 添加悬浮提示框 -->
<div id="messageBox" class="message-box">
    <div class="message-content">
        <span id="messageText"></span>
    </div>
</div>
{% endblock %}

{% block js %}
{{ super() }}
<script src="{{ url_for('static', filename='js/login.js') }}"></script>
<script src="{{ url_for('static', filename='js/crypto-js.min.js') }}"></script>
{% endblock %}
